<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%
    request.setCharacterEncoding("UTF-8");
    String htmlData = request.getParameter("content1") != null ? request.getParameter("content1") : "";
%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%
    SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
    String date = format.format(new Date());
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="<%=path%>/My97DatePicker/WdatePicker.js"></script>
    <link rel="stylesheet" type="text/css" href="<%=path%>/CSS/backLayout.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/CSS/bombBox.css">


</head>
<style>
    .seachform li span {
        color: #444444;
        padding-left: 60px;
    }

    li input {
        width: 80px;
    }

    select {
        width: 80px;
        height: 30px;
        line-height: 30px;
    }

    .seachform li {
        float: left;
    }

    .scinput {
        line-height: 10px;
        margin-top: 5px
    }

    .scinput1 {
        margin-top: 5px;
        height: 30px;
    }

    .scbtn {
        background: #57a0ff;
        border-radius: 20px;
        width: 110px;
        height: 35px;
        margin-left: 40px;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        cursor: pointer;
        outline: none;
        border: none;
    }

    thead {
        background: #f2f2f2
    }

    .template th {
        height: 45px;
        background: none;
    }

    .template tr {
        height: 45px;
    }

    .template tr th {
        height: 20px;
        border-left: 1px solid #dddee6;
        border-right: 1px solid #dddee6;
        color: #444444;
        text-align: center;
    }

    .tou {
        background: #e4eafe
    }

    .kh {
        border-bottom: 1px solid #dddee6;
    }

    .shuju td {
        border: 1px solid #dddee6;
        color: #787c88;
        text-align: center;
    }

    .shuju:nth-child(odd) {
        background: #ffffff
    }

    .shuju:nth-child(even) {
        background: #f3f5fb
    }

    .shuju:last-child {
        border-bottom: 1px solid #dddee6;
    }

    .shuju:HOVER {
        background: #fff6cd;
    }

    ul {
        border: none;
    }

    tr {
        height: 28px;
    }
</style>
<body style="background: #f5f5f5">
<div class="main">
    <div class="weizhi">
        报表>>油罐车进销存
    </div>
    <div class="div_body" style="height: 60px; min-height: 60px;margin-bottom: 0px; ">

        <form action="<%=path%>/DrivingSys/outXls" class="form" method="post">
            <ul class="seachform">
                <li>
                    <span class="scinput">油品&nbsp;:&nbsp;</span>
                    <select id="cfoilspecName">
                        <c:forEach items="${fillingCards}" var="fillingCards">
                            <option value="${fillingCards.fid}">${fillingCards.fnameL2}</option>
                        </c:forEach>
                    </select></li>
                <li><span class="scinput1">开始时间&nbsp;:&nbsp;</span>
                    <input name="beginTime" id="begindate" value="${beginTime}" style="color: gray;"
                           onclick="WdatePicker({el:'begindate',dateFmt:'yyyy-MM-dd'})"/>
                    <img onclick="WdatePicker({el:'begindate',dateFmt:'yyyy-MM-dd '})"
                         src="<%=path%>/image/date.jpg" align="absmiddle" style="padding-left: 15px"></li>
                <li><span class="scinput1">结束时间&nbsp;:&nbsp;</span>
                    <input name="endTime" id="enddate" value="${endTime}" style="color: gray;"
                           onclick="WdatePicker({el:'enddate',dateFmt:'yyyy-MM-dd'})"/>
                    <img onclick="WdatePicker({el:'enddate',dateFmt:'yyyy-MM-dd '})"
                         src="<%=path%>/image/date.jpg" align="absmiddle" style="padding-left: 15px"></li>

                <li>
                    <input id="xls" type="hidden" name="xls" value="">
                    <input type="hidden" name="fileNames" value="油罐车加油进销存明细表">
                </li>
                <li>
                    <input type="button" class="scbtn" id="selsect" value="立即查询"/>
                </li>
                <shiro:hasPermission name="/add_Sharecartworeg">
                    <li>
                        <input class="scbtn" id="out_xls" value="导出EXCLE" type="submit">
                    </li>
                </shiro:hasPermission>
            </ul>
        </form>

    </div>
    <div id="temp"
         style="width: 100%; overflow: auto; margin-bottom: 20px; margin-top: 30px; background: #fff; box-shadow: 0 0 10px #f2f2f2; min-height: 600px">

    </div>
</div>


</body>
<script type="text/javascript" src="<%=path%>/JQuery/jquery-1.8.2.js"></script>
<script type="text/javascript" src="<%=path%>/HoganJS/handlebars-v4.0.11.js"></script>
<script id="table-template-carrefuke" type="text/x-handlebars-template">
    <div class="journaling">
        <table id="template" width="100%" align="center" style="min-height:30px;border-spacing:0;">
            <tr class="shuju">
                <td style="width: 20px;height: 25px; font-size: 18px;" colspan="15">油罐车加油进销存明细表：</td>
            </tr>
            <tr class="shuju">
                <td colspan="3" style="width: 20px;height: 25px; font-size: 16px;">单位名称：{{gsName}}</td>
                <td style=" text-align: center; " colspan="8">时间：<span
                        id="beginTime"></span>至<span
                        id="endTime"></span></td>
                <td colspan="3" style="text-align: center">单位：元</td>
                <td></td>
            </tr>
            <tbody id="table1" style="border-spacing: 0px">
            <tr class="shuju">
                <td style="width: 20px;height: 15px; background: rgb(228,234,254)" rowspan="2">时间：</td>
                <td style="width: 20px;height: 15px; background: rgb(228,234,254)" colspan="3">期初结存</td>
                <td style="width: 20px;height: 15px; background: rgb(228,234,254)" colspan="3">本月购入</td>
                <td style="width: 20px;height: 15px; background: rgb(228,234,254)" colspan="4">本月领用</td>
                <td style="width: 20px;height: 15px; background: rgb(228,234,254)" colspan="3">期末结存</td>
                <td style="width: 20px;height: 15px; background: rgb(228,234,254)" rowspan="2">备注</td>
            </tr>
            <tr class="shuju">
                <td style="width: 20px;height: 15px; background: rgb(228,234,254)">数量</td>
                <td style="width: 20px;height: 15px; background: rgb(228,234,254)">单价</td>
                <td style="width: 20px;height: 15px; background: rgb(228,234,254)">金额</td>
                <td style="width: 20px;height: 15px; background: rgb(228,234,254)">数量</td>
                <td style="width: 20px;height: 15px; background: rgb(228,234,254)">单价</td>
                <td style="width: 20px;height: 15px; background: rgb(228,234,254)">金额</td>
                <td style="width: 20px;height: 15px; background: rgb(228,234,254)">数量</td>
                <td style="width: 20px;height: 15px; background: rgb(228,234,254)">单价</td>
                <td style="width: 20px;height: 15px; background: rgb(228,234,254)">金额</td>
                <td style="width: 40px;height: 15px; background: rgb(228,234,254)">使用部门</td>
                <td style="width: 20px;height: 15px; background: rgb(228,234,254)">数量</td>
                <td style="width: 20px;height: 15px; background: rgb(228,234,254)">单价</td>
                <td style="width: 20px;height: 15px; background: rgb(228,234,254)">金额</td>
            </tr>
            </tbody>
            <tbody id="table2">
            <tr class="shuju">
                <td style="width: 20px;height: 15px;">{{beginningBalance.fbizdate}}</td>
                <td id="begin" style="width: 20px;height: 15px;">{{beginningBalance.count}}</td>
                <td style="width: 20px;height: 15px;">{{beginningBalance.price}}</td>
                <td style="width: 20px;height: 15px;">{{beginningBalance.totalprice}}</td>
                <td id="month" style="width: 20px;height: 15px;">{{monthBuy.count}}</td>
                <td style="width: 20px;height: 15px;">{{monthBuy.price}}</td>
                <td style="width: 20px;height: 15px;">{{monthBuy.totalprice}}</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            {{#each ofMonthjx}}
            <tr class="shuju">
                <td>{{fbizdate}}</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="count" style="background-color: rgb(157,240,255)">{{count}}</td>
                <td class="price" style="background-color: rgb(245,255,155)">{{price}}</td>
                <td class="totalprice" style="background-color: rgb(245,255,155)">{{totalprice}}</td>
                <td style="background-color: rgb(245,255,155)">{{depname}}</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            {{/each}}
            {{#each ofMonthqt}}
            <tr class="shuju">
                <td>{{fbizdate}}</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td style="background-color: rgb(245,255,155)">{{count}}</td>
                <td style="background-color: rgb(245,255,155)">{{price}}</td>
                <td style="background-color: rgb(245,255,155)">{{totalprice}}</td>
                <td style="background-color: rgb(245,255,155)">{{depname}}</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            {{/each}}
            <tr class="shuju">
                <td id="fbizdate" style="width: 20px;height: 15px;"></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td id="count" style="width: 20px;height: 15px;"></td>
                <td id="price" style="width: 20px;height: 15px;"></td>
                <td id="totalprice" style="width: 20px;height: 15px;"></td>
                <td></td>
            </tr>
            </tbody>
            <tfoot></tfoot>
        </table>
    </div>
</script>
<script type="text/javascript">
    $(function () {
        $('#selsect').click()
    });
    //弹出框模版文件
    var myTemplate_carrefuke = Handlebars.compile($("#table-template-carrefuke").html());

    //注册一个比较内容是否为空
    Handlebars.registerHelper("isNull", function (v1, options) {
        if (v1 != "") {
            //满足添加继续执行
            return options.fn(this);
        } else {
            //不满足条件执行{{else}}部分
            return options.inverse(this);
        }
    });

    //注册一个比较大小的Helper,判断v1是否大于v2
    Handlebars.registerHelper("compare", function (v1, v2, options) {
        if (v2 == 100) {
            //满足添加继续执行
            return options.fn(this);
        }
        if (v1 == v2) {
            //满足添加继续执行
            return options.fn(this);
        } else {
            //不满足条件执行{{else}}部分
            return options.inverse(this);
        }
    });
    Handlebars.registerHelper("substring", function (str, start, end) {
        if (str == null || str == "") {
            return str;
        }
        return str.substring(start, end);
    });


    $('#selsect').click(function () {
        cfoilspecName = $('#cfoilspecName').val()
        begindate = $('#begindate').val()
        enddate = $('#enddate').val()
        $('#temp').html("<div class='loading'></div>");
        $.ajax({
            url: '<%=path%>/DrivingSys/selCarRefuelingJournal',
            type: "post",
            data: {
                'cfoilspecName': cfoilspecName,
                'begindate': begindate,
                'enddate': enddate
            },
            dataType: "json",
            success: function (res) {
                $('#temp').html(myTemplate_carrefuke(res));
                var sum1 = 0, sum2 = 0, sum3 = 0;
                $('.count').each(function (i) {
                    sum1 += $(this).html() * 1
                })
                sum1 = ($('#begin').val() * 1 + $('#month').val() * 1) - sum1
                $('.price').each(function (i) {
                    sum2 += $(this).html() * 1
                })
                $('.totalprice').each(function (i) {
                    sum3 += $(this).html() * 1
                })
                $('#count').html(sum1);
                $('#price').html(sum2);
                $('#totalprice').html(sum3);
                $('#fbizdate').html()
                $('#beginTime').html($('#begindate').val())
                $('#endTime').html($('#enddate').val())
                $('#xls').val($('#temp').html())
            },
            error: function () {
                alert('Error');
            }
        });

    })

</script>
<%@ include file="/WEB-INF/JSP/ajax.jsp" %>
</html>